<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">

    <title>Registration</title>

    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-body">

<div class="container">

    <div class="form-signin">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">新用户注册</h1>
            <img src="/images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <p>输入您的个人信息</p>
            <input type="text" autofocus="" placeholder="姓名" id="realName" class="form-control">
            <input type="text" autofocus="" placeholder="学号" id="uId"  class="form-control">
            <input type="text" autofocus="" placeholder="专业" id="profession"  class="form-control">
            <div class="radios">
                <label for="radio-01" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio"  id="radio-01" value="1" name="sex"> 男
                </label>
                <label for="radio-02" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio"   id="radio-02"  value="2"  name="sex"> 女
                </label>
            </div>

            <p>输入您的帐户详细信息如下</p>
            <input type="text" autofocus="" placeholder="用户名至少为6位，不超过12位" id="username" class="form-control">
            <input type="password" placeholder="密码至少为6位" id="password" class="form-control">
            <input type="password" placeholder="确认密码" id="repassword" class="form-control">
            <!--注册出错通知开始-->
            <div style="color:red;" id="reMsg" ></div>
            <!--注册出错通知结束-->

            <label class="checkbox">
                <input type="checkbox" value="agree this condition"> 我同意服务条款和隐私政策
            </label>
            <button type="submit" class="btn btn-lg btn-login btn-block" onclick="submitByReg()">
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                已经注册?
                <a th:href="@{/login}" class="">
                    去登陆
                </a>
            </div>
        </div>
    </div>


</div>



<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>


</body>
</html>
<script>
    $(document).ready(function(){
        $("#reMsg").html("");
    });


    function submitByReg() {
        var realName = ""
        realName = document.getElementById("realName").value
        var uId = ""
        uId = document.getElementById("uId").value
        var profession = ""
        profession = document.getElementById("profession").value
        var sex = $("input[name='sex']:checked").val()
        var username = ""
        username = document.getElementById("username").value
        var password = ""
        password = document.getElementById("password").value
        var repassword = ""
        repassword = document.getElementById("repassword").value

        if (realName === ""  || uId === "" || profession === "" || sex === ""|| username === ""|| password === "" || repassword === "" ||
            realName == null  || uId === undefined || profession === undefined || sex === undefined|| username === undefined
            || password === undefined || repassword === undefined){
            $("#reMsg").html("请将信息填写完整!")
            return;
        } else{
            if (password !== repassword){
                $("#reMsg").html("两次输入密码不一致!")
                return;
            }
            if (password.length < 6){
                $("#reMsg").html("密码长度至少6位!")
                return;
            }
            if (username.length < 6 || username.length >12){
                $("#reMsg").html("用户名至少为6位，不超过12位!")
                return;
            }
            if (uId.length !== 9){
                $("#reMsg").html("请输入正确的学号！")
                return;
            }
            // 判断是否全为汉字
            var reg=/^[\u4E00-\u9FA5]+$/;
            if (!reg.test(realName)) {
                $("#reMsg").html("请输入真实姓名！")
                return;
            }

            $.ajax({
                url : "/register",
                type: "POST",
                data: JSON.stringify({
                    realName : realName,
                    uId : uId,
                    profession : profession,
                    sex : sex,
                    username : username,
                    password : password,
                    repassword : repassword
                }),
                contentType: "application/json;charset=utf-8",
                //定义回调响应的数据格式为JSON字符串，该属性可以省略
                dataType: "json",
                //成功响应的结果
                success: function (data){
                    if (data.code === 200){
                        $("#reMsg").html(data.msg)
                    }else{
                        $("#reMsg").html(data.msg)
                    }
                }

            })
        }

    }

</script>